<template>
    <div class="login">
        <div class="login-imgDiv">
            <img class="login-imgDiv-img" :src="`${baseUrl}${appConfig.assetsPath}/img/login/${imgNum}.jpg`" />
        </div>
        <div class="login-card">
            <div class="login-card-title">{{ config.appName }}</div>
            <div class="login-card-form">
                <el-card>
                    <template #header>
                        <span>用户登陆</span>
                        <el-button style="float: right; padding: 3px 0" type="text">没有账号？请联系管理员</el-button>
                    </template>

                    <div @keyup.enter="submitForm">
                        <el-form :model="params" :rules="rules" ref="loginForm" label-width="80px">
                            <el-form-item label="用户名：" prop="account">
                                <el-input v-model="params.account" size="medium"></el-input>
                            </el-form-item>
                            <el-form-item label="密码：" prop="password">
                                <el-input type="password" v-model="params.password" size="medium"></el-input>
                            </el-form-item>
                            <div style="text-align: center">
                                <el-button type="primary" @click="submitForm" size="medium">登 陆</el-button>
                            </div>
                            <div>
                                <el-checkbox v-model="isAutoLogin">自动登陆</el-checkbox>
                            </div>
                        </el-form>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import utils from "@/lib/utils";
import { loginHttp as http } from "@/lib/http/http";
import storage from "@/lib/storage/storage";
import message from "@/lib/message";
import md5 from "js-md5";
import appConfig from "@/config";
export default defineComponent({
    name: "Login",
    setup() {
        const router = useRouter();
        const config = window.CONFIG;
        const imgNum = ref(1);
        const isAutoLogin = ref(false);
        const params: any = reactive({
            account: "",
            password: "",
        });
        const loginForm = ref(null);
        imgNum.value = utils.getRandom(0, 11);
        const token = storage.token.Get();
        const updataData = (data: any) => {
            // 保存用户信息到缓存
            storage.user.Set(data.user);
            // 保存界面权限到缓存
            const uiAuthList: any = {};
            data.api.forEach((item: any) => {
                uiAuthList[item] = true;
            });
            // 保存界面权限到缓存
            storage.uiAuth.Set(uiAuthList);
            // 保存菜单列表到缓存
            storage.menuList.Set(data.auth);
            // 跳转页面到主页
            router.push({ path: config.homePage });
        };
        const autoLogin = () => {
            // 自动登陆中
            message.loadingShow("自动登陆中");
            http.Get("/login")
                .then((data) => {
                    updataData(data);
                })
                .catch((err) => "");
        };
        const submitForm = () => {
            (loginForm.value as any).validate((valid: boolean) => {
                if (valid) {
                    message.loadingShow("登陆中");
                    http.Post("/login", {
                        account: params.account,
                        password: md5(params.password),
                        app_code: appConfig.AppCode,
                    })
                        .then((data) => {
                            // 保存用Token到缓存
                            storage.token.Set(
                                data.token,
                                isAutoLogin.value,
                                data.expires
                            );
                            updataData(data);
                        })
                        .catch((err) => "");
                }
            });
        };

        // 移除index.html页面的loading
        function moveIndexPageLoading() {
            document.getElementById("app-loading")?.remove();
            document.getElementById("app-loading-css")?.remove();
        }
        onMounted(() => {
            moveIndexPageLoading();
            if (!utils.empty(token)) {
                autoLogin();
            }
        });
        return {
            config,
            baseUrl: process.env.BASE_URL,
            appConfig,
            imgNum,
            isAutoLogin,
            params,
            loginForm,
            rules: {
                account: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur",
                    },
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                ],
            },
            submitForm,
        };
    },
});
</script>

<style lang="scss">
.el-card__header {
    border-bottom: none !important;
}
.login {
    height: 100%;

    &-imgDiv {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        overflow: hidden;

        &-img {
            height: 100%;
            width: 100%;
        }
    }

    &-card {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &-title {
            font-size: 30px;
            padding: 10px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: bold;
            text-shadow: 0 0 10px #7d7d7d;
        }
        &-form {
            width: 400px;
            & .el-card {
                background-color: rgba(255, 255, 255, 0.9);
                box-shadow: 0 0 10px #7d7d7d;
            }
        }
    }
}
</style>
